<template>
  <div class="department">
    <page-search
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <tabel-context
      :content-config="ContextConfig"
      ref="contentRef"
      @edit-click="handleEditClick"
      @new-click="handleNewClick"
    />
    <page-modal :modal-config="modalConfigRef" ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import pageSearch from '@/components/page-search/page-search.vue'
import tabelContext from '@/components/tabel-context/tabel-context.vue'
import pageModal from '@/components/page-modal/page-modal.vue'
import searchConfig from './config/search.config'
import ContextConfig from './config/context.config'
import modalConfig from './config/modal.config'
import useTabelContext from '@/hooks/useTabelContent'
import usePageModal from '@/hooks/usePageModal'
import userMainStore from '@/store/main/main'

const modalConfigRef = computed(() => {
  const mainStore = userMainStore()
  const departments = mainStore.entireDepartments.map((item) => {
    return {
      label: item.name,
      value: item.id
    }
  })
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options.push(...departments)
    }
  })
  return modalConfig
})

const { handleQueryClick, handleResetClick, contentRef } = useTabelContext()

const { handleEditClick, handleNewClick, modalRef } = usePageModal()
</script>

<style lang="less" scoped></style>
